<!--
 * @Author: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @Date: 2022-06-29 08:50:32
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-07-13 20:41:51
 * @FilePath: \B2B\ebuy\src\components\Header\TopBar.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by fengweicong 75202172+fengweicong@users.noreply.github.com, All Rights Reserved. 
-->
<template>
  <div class="topbar">
    <div class="content">
        <div class="login">
            <!-- <el-dropdown > -->
                
                <!-- <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item command="1">个人中心</el-dropdown-item>
                <el-dropdown-item command="2">订单管理</el-dropdown-item>
                <el-dropdown-item command="3">收货中心</el-dropdown-item>
                </el-dropdown-menu> -->
            <!-- </el-dropdown> -->
            <div class="yes_login" @click="to('person')" v-if="aid">
                <img class="head-portrait" v-lazy="purchaser.self_profile" alt="">
                <span class="name"> niuge_{{purchaser.id}}</span>
            </div>
            <div class="no_login" v-else>
                <el-button type="text" @click="to('login')">登录</el-button>
                <div class="line"></div>
                <el-button type="text" @click="to('register')">注册</el-button>
            </div>
        </div>
        <div class="other">
            <el-button type="text" @click="to('main')">首页</el-button>
            <el-button type="text" @click="to('goods')">供应大厅</el-button>
            <el-button type="text" @click="to('purchase')">采购大厅</el-button>
            <el-button type="text" @click="to('characteristic')">特色产业带</el-button>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'TopBar',
    data() {
        return {
            path: {
                login: '/login/login',
                register: '/login/register',
                person:'/person',
                main: '/',
                goods: '/Goods',
                purchase: '/Purchase',
                characteristic: "/Characteristic"
            },
            purchaser: {}
        }
    },
    computed:{
        aid() { 
            return this.$store.state.user.account_id
        }
    },
    watch: {
        aid: {
            immediate: true,
            handler: async function (newVal, oldVal) {
                if (newVal) {
                    await this.$API.getPurchaser().then(res => {
                        if (res.status == 200) {
                            for (let obj of res.data) {
                                if(obj.account_id == newVal) this.purchaser = obj
                            }
                        }
                    })
                }
            }
        }
        
    },
    methods: {
        to(destinatioon) {
            if (this.path[destinatioon]) this.$router.push(this.path[destinatioon])
        }
    },
    created() {
    }
}
</script>

<style lang="less" scoped>
.topbar {
    width: 100%;
    background-color: #3d3d3d;
    .content{
        width: @width-content;
        height: 50px;
        margin: 0 auto;
        background-color: #3d3d3d;
        .login {
            float: left;
            height: 100%;
            margin-left: 20px;
            .yes_login{
                height: 100%;
                display: flex;
                flex-direction: row;
                align-items: center;
                .head-portrait{
                    width: 40px;
                    height: 40px;
                    border-radius: 100%;
                }
                .name{
                    padding-left: 10px;
                }
            }
            .no_login{
                height: 100%;
                display: flex;
                align-items: center;
                .line{
                    height: 50%;
                    width: 1px;
                    background-color: @color-theme;
                    margin: 0 10px;
                }
            }
        }
        .other{
            height: 100%;
            float: right;
            display: flex;
        }
    }
    
}
</style>